<template>
  <div class="strategy-detail">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>
    
    <!-- 策略不存在 -->
    <div v-else-if="!strategy" class="empty-container">
      <el-empty description="策略不存在" />
    </div>
    
    <!-- 策略详情内容 -->
    <div v-else>
    <!-- 策略头部信息 -->
    <div class="strategy-header">
      <div class="header-left">
        <div class="strategy-title">
          <div class="strategy-icon">
            <el-icon v-if="strategy.type === 'trend'" color="#409eff"><TrendCharts /></el-icon>
            <el-icon v-else-if="strategy.type === 'technical'" color="#67c23a"><DataAnalysis /></el-icon>
            <el-icon v-else-if="strategy.type === 'grid'" color="#e6a23c"><Grid /></el-icon>
            <el-icon v-else-if="strategy.type === 'arbitrage'" color="#f56c6c"><ScaleToOriginal /></el-icon>
            <el-icon v-else color="#909399"><SetUp /></el-icon>
          </div>
          <div class="title-info">
            <h1>{{ strategy.name }}</h1>
            <div class="strategy-meta">
              <el-tag :type="getStatusTagType(strategy.status)" size="small">
                {{ getStatusText(strategy.status) }}
              </el-tag>
              <span class="type-text">{{ getStrategyTypeText(strategy.type) }}</span>
              <span class="symbol">{{ strategy.symbol }}</span>
            </div>
          </div>
        </div>
        <p class="strategy-description">{{ strategy.description }}</p>
      </div>
      <div class="header-actions">
        <el-button-group>
          <el-button 
            v-if="strategy.status === 'stopped' || strategy.status === 'paused'" 
            type="success" 
            @click="handleStartStrategy"
          >
            <el-icon><VideoPlay /></el-icon>
            启动策略
          </el-button>
          <el-button 
            v-if="strategy.status === 'running'" 
            type="warning" 
            @click="handlePauseStrategy"
          >
            <el-icon><VideoPause /></el-icon>
            暂停策略
          </el-button>
                     <el-button 
             v-if="strategy.status === 'running' || strategy.status === 'paused'" 
             type="danger" 
             @click="handleStopStrategy"
           >
             <el-icon><Close /></el-icon>
             停止策略
           </el-button>
        </el-button-group>
        <el-dropdown @command="handleMoreActions">
          <el-button>
            更多操作<el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit">编辑配置</el-dropdown-item>
              <el-dropdown-item command="clone">复制策略</el-dropdown-item>
              <el-dropdown-item command="export">导出配置</el-dropdown-item>
              <el-dropdown-item command="backtest">回测分析</el-dropdown-item>
              <el-dropdown-item command="delete" divided>删除策略</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 核心性能指标 -->
    <el-row :gutter="16" class="performance-row">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-card class="performance-card">
          <div class="performance-item">
            <div class="performance-label">总收益率</div>
            <div class="performance-value" :class="{ profit: strategy.totalReturn > 0, loss: strategy.totalReturn < 0 }">
              {{ strategy.totalReturn > 0 ? '+' : '' }}{{ strategy.totalReturn }}%
            </div>
            <div class="performance-desc">累计收益</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-card class="performance-card">
          <div class="performance-item">
            <div class="performance-label">夏普比率</div>
            <div class="performance-value" :class="{ profit: strategy.sharpeRatio > 1, warning: strategy.sharpeRatio > 0 && strategy.sharpeRatio <= 1, loss: strategy.sharpeRatio <= 0 }">
              {{ strategy.sharpeRatio }}
            </div>
            <div class="performance-desc">风险调整收益</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-card class="performance-card">
          <div class="performance-item">
            <div class="performance-label">最大回撤</div>
            <div class="performance-value loss">{{ strategy.drawdown }}%</div>
            <div class="performance-desc">风险控制</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-card class="performance-card">
          <div class="performance-item">
            <div class="performance-label">胜率</div>
            <div class="performance-value" :class="{ profit: strategy.winRate > 60, warning: strategy.winRate > 50, loss: strategy.winRate <= 50 }">
              {{ strategy.winRate }}%
            </div>
            <div class="performance-desc">交易成功率</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-card class="performance-card">
          <div class="performance-item">
            <div class="performance-label">交易次数</div>
            <div class="performance-value">{{ strategy.trades }}</div>
            <div class="performance-desc">执行频次</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-card class="performance-card">
          <div class="performance-item">
            <div class="performance-label">波动率</div>
            <div class="performance-value">{{ strategy.volatility }}%</div>
            <div class="performance-desc">价格波动</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="16" class="content-row">
      <!-- 左侧：收益曲线和配置 -->
      <el-col :xs="24" :lg="16">
        <!-- 收益曲线图表 -->
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>收益曲线</span>
              <div class="chart-controls">
                <el-radio-group v-model="chartPeriod" size="small">
                  <el-radio-button label="7D">7天</el-radio-button>
                  <el-radio-button label="30D">30天</el-radio-button>
                  <el-radio-button label="90D">90天</el-radio-button>
                  <el-radio-button label="1Y">1年</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="equity-curve">
            <div class="chart-container" ref="chartContainer">
              <!-- 收益曲线图表展示 -->
              <div class="mock-chart">
                <svg width="100%" height="300" viewBox="0 0 800 300">
                  <defs>
                    <linearGradient id="equityGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                      <stop offset="0%" style="stop-color:#67c23a;stop-opacity:0.3" />
                      <stop offset="100%" style="stop-color:#67c23a;stop-opacity:0.1" />
                    </linearGradient>
                  </defs>
                  <!-- 网格线 -->
                  <g class="grid">
                    <line x1="0" y1="60" x2="800" y2="60" stroke="#f0f0f0" stroke-width="1"/>
                    <line x1="0" y1="120" x2="800" y2="120" stroke="#f0f0f0" stroke-width="1"/>
                    <line x1="0" y1="180" x2="800" y2="180" stroke="#f0f0f0" stroke-width="1"/>
                    <line x1="0" y1="240" x2="800" y2="240" stroke="#f0f0f0" stroke-width="1"/>
                  </g>
                  <!-- 收益曲线 -->
                  <path 
                    d="M 50,250 Q 150,230 250,200 T 450,180 T 650,160 T 750,140" 
                    stroke="#67c23a" 
                    stroke-width="3" 
                    fill="none"
                  />
                  <!-- 填充区域 -->
                  <path 
                    d="M 50,250 Q 150,230 250,200 T 450,180 T 650,160 T 750,140 L 750,280 L 50,280 Z" 
                    fill="url(#equityGradient)"
                  />
                  <!-- 数据点 -->
                  <circle cx="50" cy="250" r="4" fill="#67c23a" stroke="white" stroke-width="2"/>
                  <circle cx="250" cy="200" r="4" fill="#67c23a" stroke="white" stroke-width="2"/>
                  <circle cx="450" cy="180" r="4" fill="#67c23a" stroke="white" stroke-width="2"/>
                  <circle cx="650" cy="160" r="4" fill="#67c23a" stroke="white" stroke-width="2"/>
                  <circle cx="750" cy="140" r="4" fill="#67c23a" stroke="white" stroke-width="2"/>
                </svg>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 策略技术指标配置 -->
        <el-card class="indicators-card">
          <template #header>
            <div class="card-header">
              <span><el-icon><DataAnalysis /></el-icon> 技术指标配置</span>
              <el-button type="primary" size="small" @click="handleEditIndicators">
                <el-icon><Edit /></el-icon>
                编辑指标
              </el-button>
            </div>
          </template>
          
          <el-tabs v-model="activeIndicatorTab" class="indicators-content">
            <!-- 买入信号配置 -->
            <el-tab-pane label="买入信号" name="buy">
              <div class="signal-config">
                <h4><el-icon><TrendCharts /></el-icon>入场信号配置</h4>
                <div class="indicator-group">
                  <!-- 蜻蜓Doji -->
                  <div v-if="indicators.buy.dragonfly.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><VideoPlay /></el-icon>
                      <span class="indicator-name">蜻蜓Doji反转</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="8">
                          <label>时间周期: <strong>{{ indicators.buy.dragonfly.timeframe }}</strong></label>
                        </el-col>
                        <el-col :span="8">
                          <label>影线比例: <strong>{{ indicators.buy.dragonfly.shadowRatio }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- RSI -->
                  <div v-if="indicators.buy.rsi.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><TrendCharts /></el-icon>
                      <span class="indicator-name">RSI相对强弱指标</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="6">
                          <label>周期: <strong>{{ indicators.buy.rsi.period }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>超卖线: <strong>{{ indicators.buy.rsi.oversold }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>确认线: <strong>{{ indicators.buy.rsi.confirm }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- 成交量 -->
                  <div v-if="indicators.buy.volume.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><Grid /></el-icon>
                      <span class="indicator-name">成交量确认</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="8">
                          <label>放量倍数: <strong>{{ indicators.buy.volume.multiplier }}x</strong></label>
                        </el-col>
                        <el-col :span="8">
                          <label>基准周期: <strong>{{ indicators.buy.volume.period }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- 移动平均线 -->
                  <div v-if="indicators.buy.ma.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><TrendCharts /></el-icon>
                      <span class="indicator-name">移动平均线</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="6">
                          <label>短期MA: <strong>{{ indicators.buy.ma.short }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>长期MA: <strong>{{ indicators.buy.ma.long }}</strong></label>
                        </el-col>
                        <el-col :span="12">
                          <label>信号类型: <strong>{{ getMaPositionText(indicators.buy.ma.position) }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- MACD -->
                  <div v-if="indicators.buy.macd.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><DataAnalysis /></el-icon>
                      <span class="indicator-name">MACD指标</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="6">
                          <label>快线: <strong>{{ indicators.buy.macd.fast }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>慢线: <strong>{{ indicators.buy.macd.slow }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>信号线: <strong>{{ indicators.buy.macd.signal }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- 布林带 -->
                  <div v-if="indicators.buy.bollinger.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><ScaleToOriginal /></el-icon>
                      <span class="indicator-name">布林带</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="8">
                          <label>周期: <strong>{{ indicators.buy.bollinger.period }}</strong></label>
                        </el-col>
                        <el-col :span="8">
                          <label>标准差: <strong>{{ indicators.buy.bollinger.stdDev }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- KDJ随机指标 -->
                  <div v-if="indicators.buy.stochastic.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><TrendCharts /></el-icon>
                      <span class="indicator-name">KDJ随机指标</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="6">
                          <label>周期: <strong>{{ indicators.buy.stochastic.period }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>K平滑: <strong>{{ indicators.buy.stochastic.smoothK }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>D平滑: <strong>{{ indicators.buy.stochastic.smoothD }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- EMA指数移动平均线 -->
                  <div v-if="indicators.buy.ema?.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><TrendCharts /></el-icon>
                      <span class="indicator-name">EMA指数移动平均</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="8">
                          <label>EMA周期: <strong>{{ indicators.buy.ema.period }}</strong></label>
                        </el-col>
                        <el-col :span="8">
                          <label>趋势确认: <strong>{{ indicators.buy.ema.confirmation ? '是' : '否' }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- ATR平均真实波幅 -->
                  <div v-if="indicators.buy.atr?.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><ScaleToOriginal /></el-icon>
                      <span class="indicator-name">ATR波动率指标</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="8">
                          <label>ATR周期: <strong>{{ indicators.buy.atr.period }}</strong></label>
                        </el-col>
                        <el-col :span="8">
                          <label>倍数: <strong>{{ indicators.buy.atr.multiplier }}x</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- 一目均衡表 -->
                  <div v-if="indicators.buy.ichimoku?.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><DataAnalysis /></el-icon>
                      <span class="indicator-name">一目均衡表</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="6">
                          <label>转换线: <strong>{{ indicators.buy.ichimoku.tenkan }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>基准线: <strong>{{ indicators.buy.ichimoku.kijun }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>先行线: <strong>{{ indicators.buy.ichimoku.senkou }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <!-- 卖出信号配置 -->
            <el-tab-pane label="卖出信号" name="sell">
              <div class="signal-config">
                <h4><el-icon><Close /></el-icon>出场信号配置</h4>
                <div class="indicator-group">
                  <!-- 止盈设置 -->
                  <div v-if="indicators.sell.takeProfit.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><TrendCharts /></el-icon>
                      <span class="indicator-name">止盈策略</span>
                      <el-tag type="success" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="6">
                          <label>止盈比例: <strong>{{ indicators.sell.takeProfit.percentage }}%</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>移动止盈: <strong>{{ indicators.sell.takeProfit.trailing ? '是' : '否' }}</strong></label>
                        </el-col>
                        <el-col :span="6" v-if="indicators.sell.takeProfit.trailing && indicators.sell.takeProfit.trailDistance">
                          <label>追踪距离: <strong>{{ indicators.sell.takeProfit.trailDistance }}%</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- 止损设置 -->
                  <div v-if="indicators.sell.stopLoss.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><Lock /></el-icon>
                      <span class="indicator-name">止损策略</span>
                      <el-tag type="danger" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="6">
                          <label>止损比例: <strong>{{ indicators.sell.stopLoss.percentage }}%</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>动态止损: <strong>{{ indicators.sell.stopLoss.dynamic ? '是' : '否' }}</strong></label>
                        </el-col>
                        <el-col :span="6" v-if="indicators.sell.stopLoss.dynamic && indicators.sell.stopLoss.atrMultiplier">
                          <label>ATR倍数: <strong>{{ indicators.sell.stopLoss.atrMultiplier }}x</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- RSI超买 -->
                  <div v-if="indicators.sell.rsi.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><TrendCharts /></el-icon>
                      <span class="indicator-name">RSI超买信号</span>
                      <el-tag type="warning" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="6">
                          <label>周期: <strong>{{ indicators.sell.rsi.period }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>超买线: <strong>{{ indicators.sell.rsi.overbought }}</strong></label>
                        </el-col>
                        <el-col :span="6">
                          <label>持续时间: <strong>{{ indicators.sell.rsi.duration }}K</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- 墓碑十字 -->
                  <div v-if="indicators.sell.gravestone.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><VideoPause /></el-icon>
                      <span class="indicator-name">墓碑十字反转</span>
                      <el-tag type="warning" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="8">
                          <label>时间周期: <strong>{{ indicators.sell.gravestone.timeframe }}</strong></label>
                        </el-col>
                        <el-col :span="8">
                          <label>影线比例: <strong>{{ indicators.sell.gravestone.shadowRatio }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- MACD顶背离 -->
                  <div v-if="indicators.sell.macd.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><DataAnalysis /></el-icon>
                      <span class="indicator-name">MACD卖出信号</span>
                      <el-tag type="warning" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="8">
                          <label>顶背离: <strong>{{ indicators.sell.macd.divergence ? '监控' : '忽略' }}</strong></label>
                        </el-col>
                        <el-col :span="8" v-if="indicators.sell.macd.bearishCross">
                          <label>死叉信号: <strong>{{ indicators.sell.macd.bearishCross ? '监控' : '忽略' }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- 布林带上轨 -->
                  <div v-if="indicators.sell.bollinger.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><ScaleToOriginal /></el-icon>
                      <span class="indicator-name">布林带卖出信号</span>
                      <el-tag type="warning" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="8">
                          <label>上轨阻力: <strong>{{ indicators.sell.bollinger.upperBand ? '监控' : '忽略' }}</strong></label>
                        </el-col>
                        <el-col :span="8" v-if="indicators.sell.bollinger.squeeze">
                          <label>布林收缩: <strong>{{ indicators.sell.bollinger.squeeze ? '监控' : '忽略' }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <!-- 成交量Profile -->
                  <div v-if="indicators.sell.volumeProfile?.enabled" class="indicator-item">
                    <div class="indicator-header">
                      <el-icon><Grid /></el-icon>
                      <span class="indicator-name">成交量分布</span>
                      <el-tag type="warning" size="small">已启用</el-tag>
                    </div>
                    <div class="indicator-params">
                      <el-row :gutter="16">
                        <el-col :span="8">
                          <label>阻力位: <strong>{{ indicators.sell.volumeProfile.resistance ? '监控' : '忽略' }}</strong></label>
                        </el-col>
                        <el-col :span="8">
                          <label>量能萎缩: <strong>{{ indicators.sell.volumeProfile.lowVolume ? '监控' : '忽略' }}</strong></label>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>

        <!-- 基础策略配置 -->
        <el-card class="config-card">
          <template #header>
            <div class="card-header">
              <span>基础配置</span>
              <el-button type="primary" size="small" @click="handleEditConfig">
                <el-icon><Edit /></el-icon>
                编辑配置
              </el-button>
            </div>
          </template>
          <div class="config-content">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="策略名称">{{ strategy.name }}</el-descriptions-item>
              <el-descriptions-item label="策略类型">{{ getStrategyTypeText(strategy.type) }}</el-descriptions-item>
              <el-descriptions-item label="交易对">{{ strategy.symbol }}</el-descriptions-item>
              <el-descriptions-item label="风险等级">
                <el-tag 
                  :type="strategy.riskLevel === 'high' ? 'danger' : strategy.riskLevel === 'medium' ? 'warning' : 'success'"
                  size="small"
                >
                  {{ getRiskLevelText(strategy.riskLevel) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="初始资金">${{ strategy.initialCapital.toLocaleString() }}</el-descriptions-item>
              <el-descriptions-item label="当前资金">${{ strategy.currentCapital.toLocaleString() }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ formatDate(strategy.createTime) }}</el-descriptions-item>
              <el-descriptions-item label="最后更新">{{ formatDate(strategy.updateTime) }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧：交易记录和风险指标 -->
      <el-col :xs="24" :lg="8">
        <!-- 最近交易记录 -->
        <el-card class="trades-card">
          <template #header>
            <div class="card-header">
              <span>最近交易</span>
              <el-button type="text" size="small" @click="handleViewAllTrades">查看全部</el-button>
            </div>
          </template>
          <div class="trades-list">
            <div 
              v-for="trade in recentTrades" 
              :key="trade.id"
              class="trade-item"
            >
              <div class="trade-info">
                <div class="trade-time">{{ trade.time }}</div>
                <div class="trade-details">
                  <span class="trade-side" :class="trade.side.toLowerCase()">{{ trade.side }}</span>
                  <span class="trade-amount">{{ trade.amount }}</span>
                </div>
              </div>
              <div class="trade-result">
                <div class="trade-price">${{ trade.price }}</div>
                <div class="trade-pnl" :class="{ profit: trade.pnl > 0, loss: trade.pnl < 0 }">
                  {{ trade.pnl > 0 ? '+' : '' }}{{ trade.pnl }}%
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 风险指标 -->
        <el-card class="risk-card">
          <template #header>
            <span>风险分析</span>
          </template>
          <div class="risk-metrics">
            <div class="risk-item">
              <div class="risk-label">
                <span>最大回撤</span>
                <el-tooltip content="策略运行期间的最大亏损幅度" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="risk-value loss">{{ strategy.drawdown }}%</div>
            </div>
            <div class="risk-item">
              <div class="risk-label">
                <span>最大连胜</span>
                <el-tooltip content="连续盈利交易的最大次数" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="risk-value">12次</div>
            </div>
            <div class="risk-item">
              <div class="risk-label">
                <span>最大连亏</span>
                <el-tooltip content="连续亏损交易的最大次数" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="risk-value warning">5次</div>
            </div>
            <div class="risk-item">
              <div class="risk-label">
                <span>盈亏比</span>
                <el-tooltip content="平均盈利与平均亏损的比值" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="risk-value profit">1.8:1</div>
            </div>
            <div class="risk-item">
              <div class="risk-label">
                <span>卡玛比率</span>
                <el-tooltip content="年化收益率除以最大回撤" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="risk-value">{{ (strategy.totalReturn / Math.abs(strategy.drawdown)).toFixed(2) }}</div>
            </div>
            <div class="risk-item">
              <div class="risk-label">
                <span>索提诺比率</span>
                <el-tooltip content="考虑下行风险的收益风险比" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="risk-value">{{ (strategy.sharpeRatio * 1.2).toFixed(2) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getStrategyById, type Strategy } from '@/mock/strategyData';
import {
  TrendCharts,
  DataAnalysis,
  Grid,
  ScaleToOriginal,
  SetUp,
  VideoPlay,
  VideoPause,
  ArrowDown,
  Edit,
  QuestionFilled,
  Close,
  Lock
} from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

// 图表时间周期
const chartPeriod = ref('30D');

// 技术指标配置标签页
const activeIndicatorTab = ref('buy');

// 技术指标配置数据
const indicators = ref({
  buy: {
    dragonfly: {
      enabled: true,
      timeframe: '4h',
      shadowRatio: 3.0
    },
    rsi: {
      enabled: true,
      period: 14,
      oversold: 30,
      confirm: 35
    },
    volume: {
      enabled: true,
      multiplier: 1.5,
      period: 20
    },
    ma: {
      enabled: true,
      short: 20,
      long: 50,
      position: 'both'
    },
    macd: {
      enabled: true,
      fast: 12,
      slow: 26,
      signal: 9
    },
    bollinger: {
      enabled: true,
      period: 20,
      stdDev: 2.0
    },
    stochastic: {
      enabled: true,
      period: 14,
      smoothK: 14,
      smoothD: 3
    },
    ema: {
      enabled: true,
      period: 9,
      confirmation: true
    },
    atr: {
      enabled: true,
      period: 14,
      multiplier: 1.5
    },
    ichimoku: {
      enabled: true,
      tenkan: 9,
      kijun: 26,
      senkou: 52
    }
  },
  sell: {
    takeProfit: {
      enabled: true,
      percentage: 8.0,
      trailing: false,
      trailDistance: 5.0
    },
    stopLoss: {
      enabled: true,
      percentage: 4.0,
      dynamic: true,
      atrMultiplier: 1.5
    },
    rsi: {
      enabled: true,
      period: 14,
      overbought: 70,
      duration: 2
    },
    gravestone: {
      enabled: true,
      timeframe: '4h',
      shadowRatio: 3.0
    },
    macd: {
      enabled: true,
      divergence: true,
      bearishCross: true
    },
    bollinger: {
      enabled: true,
      upperBand: true,
      squeeze: false
    },
    volumeProfile: {
      enabled: true,
      resistance: true,
      lowVolume: true
    }
  }
});

// 风险管理配置
const riskConfig = ref({
  maxPosition: 80,
  maxSingleTrade: 20,
  riskFactor: 1.2,
  dailyMaxLoss: 5,
  maxConsecutiveLoss: 5,
  drawdownAlert: 15,
  dailyMaxTrades: 20,
  tradeInterval: 15,
  cooldownPeriod: 30
});

// 策略数据
const strategy = ref<Strategy | null>(null);
const loading = ref(false);

// 加载策略详情
const loadStrategyDetail = async (id: number) => {
  try {
    loading.value = true;
    const data = await getStrategyById(id);
    if (data) {
      strategy.value = data;
      // 同步指标数据
      if (data.indicators) {
        indicators.value = data.indicators;
      }
      if (data.riskConfig) {
        riskConfig.value = data.riskConfig;
      }
    } else {
      ElMessage.error('策略不存在');
      router.push('/trading/strategy');
    }
  } catch (error) {
    ElMessage.error('加载策略详情失败: ' + error);
  } finally {
    loading.value = false;
  }
};

// 最近交易记录
const recentTrades = ref([
  { id: 1, time: '14:23', side: '买入', amount: '0.234', price: '43,256', pnl: 2.34 },
  { id: 2, time: '13:45', side: '卖出', amount: '0.156', price: '42,890', pnl: -0.67 },
  { id: 3, time: '12:18', side: '买入', amount: '0.298', price: '42,567', pnl: 1.89 },
  { id: 4, time: '11:32', side: '卖出', amount: '0.187', price: '43,102', pnl: 0.45 },
  { id: 5, time: '10:15', side: '买入', amount: '0.345', price: '42,234', pnl: 3.21 }
]);

// 工具函数
const getStrategyTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    trend: '趋势跟踪',
    technical: '技术指标',
    grid: '网格交易',
    arbitrage: '统计套利',
    volatility: '波动率策略'
  };
  return typeMap[type] || type;
};

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    running: '运行中',
    paused: '暂停',
    stopped: '停止',
    error: '异常'
  };
  return statusMap[status] || status;
};

const getStatusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    running: 'success',
    paused: 'warning',
    stopped: 'info',
    error: 'danger'
  };
  return typeMap[status] || 'info';
};

const getRiskLevelText = (level: string) => {
  const levelMap: Record<string, string> = {
    low: '低风险',
    medium: '中风险',
    high: '高风险'
  };
  return levelMap[level] || level;
};

const formatDate = (dateStr: string) => {
  return new Date(dateStr).toLocaleString('zh-CN');
};

// 事件处理
const handleStartStrategy = () => {
  ElMessageBox.confirm('确认启动策略？', '确认操作', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    if (strategy.value) {
      strategy.value.status = 'running';
      ElMessage.success('策略启动成功');
    }
  });
};

const handlePauseStrategy = () => {
  if (strategy.value) {
    strategy.value.status = 'paused';
    ElMessage.success('策略已暂停');
  }
};

const handleStopStrategy = () => {
  ElMessageBox.confirm('确认停止策略？', '确认操作', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    if (strategy.value) {
      strategy.value.status = 'stopped';
      ElMessage.success('策略已停止');
    }
  });
};

const handleMoreActions = (command: string) => {
  switch (command) {
    case 'edit':
      ElMessage.info('编辑配置功能开发中...');
      break;
    case 'clone':
      ElMessage.info('复制策略功能开发中...');
      break;
    case 'export':
      ElMessage.info('导出配置功能开发中...');
      break;
    case 'backtest':
      ElMessage.info('回测分析功能开发中...');
      break;
    case 'delete':
      ElMessageBox.confirm('确认删除策略？', '确认删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        router.push('/trading/strategy');
        ElMessage.success('策略删除成功');
      });
      break;
  }
};

const handleEditConfig = () => {
  ElMessage.info('编辑配置功能开发中...');
};

const handleEditIndicators = () => {
  ElMessage.info('编辑技术指标功能开发中...');
};

const handleViewAllTrades = () => {
  ElMessage.info('查看全部交易功能开发中...');
};

const getMaPositionText = (position: string) => {
  const positionMap: Record<string, string> = {
    'both': '双均线确认',
    'short_above_long': '短期均线上穿',
    'price_above_short': '价格突破短期均线',
    'golden_cross': '黄金交叉',
    'range_bound': '震荡区间',
    'breakout': '突破信号',
    'multi_ma_align': '多均线排列',
    'mean_reversion': '均值回归',
    'dca_zone': 'DCA加仓区域',
    'above_short': '价格在短期均线上方'
  };
  return positionMap[position] || position;
};

onMounted(() => {
  // 根据路由参数加载策略数据
  const strategyId = route.params.id;
  if (strategyId) {
    loadStrategyDetail(Number(strategyId));
  }
});
</script>

<style lang="scss" scoped>
.strategy-detail {
  .strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding: 24px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .header-left {
      flex: 1;

      .strategy-title {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .strategy-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: var(--el-fill-color-light);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;

          .el-icon {
            font-size: 24px;
          }
        }

        .title-info {
          h1 {
            margin: 0 0 8px 0;
            font-size: 24px;
            font-weight: 600;
            color: var(--el-text-color-primary);
          }

          .strategy-meta {
            display: flex;
            align-items: center;
            gap: 12px;

            .type-text {
              font-size: 14px;
              color: var(--el-text-color-regular);
            }

            .symbol {
              font-size: 14px;
              font-weight: 600;
              color: var(--el-color-primary);
            }
          }
        }
      }

      .strategy-description {
        margin: 0;
        color: var(--el-text-color-regular);
        line-height: 1.6;
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }

  .performance-row {
    margin-bottom: 24px;

    .performance-card {
      height: 100%;
      border: none;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
      }

      .performance-item {
        text-align: center;
        padding: 8px 0;

        .performance-label {
          font-size: 12px;
          color: var(--el-text-color-secondary);
          margin-bottom: 8px;
        }

        .performance-value {
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 4px;
          color: var(--el-text-color-primary);

          &.profit {
            color: var(--el-color-success);
          }

          &.loss {
            color: var(--el-color-danger);
          }

          &.warning {
            color: var(--el-color-warning);
          }
        }

        .performance-desc {
          font-size: 11px;
          color: var(--el-text-color-placeholder);
        }
      }
    }
  }

  .content-row {
    .chart-card,
    .config-card,
    .trades-card,
    .risk-card {
      margin-bottom: 16px;
      border: none;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
      }
    }

    .chart-card {
      .equity-curve {
        .chart-container {
          height: 320px;
          position: relative;

          .mock-chart {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }

    .config-card {
      .config-content {
        :deep(.el-descriptions__table) {
          .el-descriptions__cell {
            padding: 12px;
          }
        }
      }
    }

    .trades-card {
      .trades-list {
        max-height: 320px;
        overflow-y: auto;

        .trade-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid var(--el-border-color-extra-light);

          &:last-child {
            border-bottom: none;
          }

          .trade-info {
            .trade-time {
              font-size: 12px;
              color: var(--el-text-color-secondary);
              margin-bottom: 4px;
            }

            .trade-details {
              display: flex;
              align-items: center;
              gap: 8px;

              .trade-side {
                font-size: 12px;
                font-weight: 600;

                &.买入 {
                  color: var(--el-color-success);
                }

                &.卖出 {
                  color: var(--el-color-primary);
                }
              }

              .trade-amount {
                font-size: 12px;
                color: var(--el-text-color-regular);
              }
            }
          }

          .trade-result {
            text-align: right;

            .trade-price {
              font-size: 13px;
              color: var(--el-text-color-primary);
              margin-bottom: 4px;
            }

            .trade-pnl {
              font-size: 12px;
              font-weight: 600;

              &.profit {
                color: var(--el-color-success);
              }

              &.loss {
                color: var(--el-color-danger);
              }
            }
          }
        }
      }
    }

    .risk-card {
      .risk-metrics {
        .risk-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid var(--el-border-color-extra-light);

          &:last-child {
            border-bottom: none;
          }

          .risk-label {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 14px;
            color: var(--el-text-color-regular);

            .el-icon {
              font-size: 12px;
              color: var(--el-text-color-placeholder);
              cursor: help;
            }
          }

          .risk-value {
            font-weight: 600;
            color: var(--el-text-color-primary);

            &.profit {
              color: var(--el-color-success);
            }

            &.loss {
              color: var(--el-color-danger);
            }

            &.warning {
              color: var(--el-color-warning);
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .strategy-detail {
    .strategy-header {
      flex-direction: column;
      gap: 16px;

      .header-actions {
        align-self: flex-end;
      }
    }

    .performance-row {
      .el-col {
        margin-bottom: 12px;
      }
    }
  }
}

@media (max-width: 768px) {
  .strategy-detail {
    .strategy-header {
      padding: 16px;

      .header-left {
        .strategy-title {
          .strategy-icon {
            width: 40px;
            height: 40px;
            margin-right: 12px;

            .el-icon {
              font-size: 20px;
            }
          }

          .title-info {
            h1 {
              font-size: 20px;
            }

            .strategy-meta {
              flex-direction: column;
              align-items: flex-start;
              gap: 8px;
            }
          }
        }
      }

      .header-actions {
        width: 100%;
        flex-direction: column;

        .el-button-group {
          width: 100%;

          .el-button {
            flex: 1;
          }
        }
      }
    }

    .performance-card {
      .performance-item {
        .performance-value {
          font-size: 18px;
        }
      }
    }
  }
}

.profit {
  color: var(--el-color-success);
}

.loss {
  color: var(--el-color-danger);
}

.warning {
  color: var(--el-color-warning);
}

// 技术指标配置样式
.indicators-card {
  margin-bottom: 16px;

  .indicators-content {
    .signal-config, .risk-config {
      h4 {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
    }

    .indicator-group, .risk-group {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .indicator-item, .risk-item-config {
      border: 1px solid var(--el-border-color-light);
      border-radius: 8px;
      padding: 16px;
      background: var(--el-fill-color-extra-light);

      .indicator-header, .risk-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .indicator-name, .risk-name {
          font-weight: 500;
          color: var(--el-text-color-primary);
          margin-left: 8px;
        }
      }

      .indicator-params {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--el-border-color-lighter);

        .param-unit {
          margin-left: 4px;
          color: var(--el-text-color-secondary);
          font-size: 12px;
        }
      }
    }
  }

  :deep(.el-tabs__content) {
    padding: 20px 0;
  }

  :deep(.el-tab-pane) {
    padding: 0 16px;
  }

  :deep(.el-form-item) {
    margin-bottom: 12px;

    .el-form-item__label {
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }
  }

  :deep(.el-input-number) {
    width: 100%;
  }
}
</style> 